<template>
    <el-dialog :model-value="props.visible" title="包装订单编辑" width="30%" @close="handleClose">
        <el-form :model="formData" ref="formRef" label-width="auto">
            <el-form-item label="交货日期" prop="deliveryDate" align="right">
                <el-date-picker v-model="formData.deliveryDate" placeholder="年/月/日" format="YYYY/MM/DD" value-format="YYYY-MM-DD"></el-date-picker>
            </el-form-item>
            <el-form-item label="包装件名称">
                <span class="packing-item-name">{{ props.orderDetail.packingName }}</span>
            </el-form-item>
            <el-form-item label="包装物信息"></el-form-item>
            <el-form-item label="包装袋：">
                <el-row style="width: 100%">
                    <el-col :span="6">
                        <span class="packing-item-title">小类：</span>
                        <span class="packing-item-name">{{ props.orderDetail.productSubcategoryName }}</span>
                    </el-col>
                    <el-col :span="10">
                        <span class="packing-item-title">品名：</span>
                        <span class="packing-item-name">{{ props.orderDetail.packingPocketName }}</span>
                    </el-col>
                </el-row>
            </el-form-item>
            <el-form-item v-for="(item,index) in props.orderDetail.packingVoList" :key="item.index + 1" :label="`包装物${index+1}：`">
                <el-row style="width: 100%">
                    <el-col :span="6">
                        <span class="packing-item-title">小类：</span>
                        <span class="packing-item-name">{{ item.productSubcategoryName }}</span>
                    </el-col>
                    <el-col :span="10">
                        <span class="packing-item-title">品名：</span>
                        <span class="packing-item-name">{{ item.specsDetail }}</span>
                    </el-col>
                    <el-col :span="6">
                        <span class="packing-item-title">数量：</span>
                        <span class="packing-item-name">{{ item.number || 0 }}</span>
                    </el-col>
                </el-row>
            </el-form-item>
            <el-form-item label="生产数量" prop="produceNumber" align="right">
                <el-input  type="number" v-model.number="formData.produceNumber" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="备注" prop="remark" align="right">
                <el-input  type="textarea" v-model="formData.remark" placeholder="请输入" maxlength="125" show-word-limit></el-input>
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button  type="primary" @click="handleSubmit" >确 定</el-button>
                <el-button @click="handleClose">取 消</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { type FormInstance } from 'element-plus';
import { editPackageOrderApi } from '@/api/sj/productManagement/packageOrder/index';

const props = defineProps<{
    visible: boolean,
    orderDetail: any
}>();
const emits = defineEmits(['close','submit']);
const formRef = ref<FormInstance>();
const formData = ref({
    deliveryDate: undefined,
    produceNumber: undefined,
    remark: undefined
});

const handleSubmit = async () => {
    const submitData = {
        ...formData.value,
        id: props.orderDetail.id,
        auxiliaryId: props.orderDetail.auxiliaryId
    };
    const { code } = await editPackageOrderApi(submitData);
    if(code == 200){
        emits('submit',true);
        handleClose();
    }else{
        emits('submit', false);
    };
};

const handleClose = () => {
    formRef.value?.resetFields();
    emits('close');
};
</script>

<style lang="scss" scoped>
.packing-item-title{
    font-weight: bolder;
}
.packing-item-name{
    color: #69AFF0;
}
</style>